<template>
    <a-button class="editable-add-btn" preIcon="ant-design:plus-outlined" style="margin-bottom: 2px"
        @click="handleAdd">添加题库</a-button>
    <a-table bordered :data-source="formData.labExamRepoList" :pagination="false" :columns="bankColumns"
        style="margin-bottom: 2px;">
        <template #bodyCell="{ column, record }">
            <a-input name="id" v-model:value="record.id" style="display: none" />
            <a-input name="key" v-model:value="record.key" style="display: none" />
            <template v-if="column.dataIndex === 'bankId'" style="text-align:center">
                <a-select name="bankId" v-model:value="record.bankId" :options="options" style="height: 30px; width: 200px;"
                    @change="bankChange(record.key, record.bankId)"></a-select>
            </template>
            <template v-if="column.dataIndex === 'radioCount'" style="text-align:center">
                <a-input name="radioCount" v-model:value="record.radioCount"
                    style="height: 30px;width: 70px;display: inline-block; white-space: nowrap;"
                    @change="dataChange()" />/{{ record.radioNum }}
            </template>
            <template v-if="column.dataIndex === 'radioScore'" style="text-align:center">
                <a-input name="radioScore" v-model:value="record.radioScore" style="height: 30px;width: 80px;"
                    @change="dataChange()" />
            </template>

            <template v-if="column.dataIndex === 'multiCount'" style="text-align:center">
                <a-input name="multiCount" v-model:value="record.multiCount"
                    style="height: 30px;width: 70px;display: inline-block; white-space: nowrap;"
                    @change="dataChange()" />/{{ record.multiNum }}
            </template>
            <template v-if="column.dataIndex === 'multiScore'" style="text-align:center">
                <a-input name="multiScore" v-model:value="record.multiScore" style="height: 30px;width: 80px;"
                    @change="dataChange()" />
            </template>

            <template v-if="column.dataIndex === 'judgeCount'" style="text-align:center">
                <a-input name="judgeCount" v-model:value="record.judgeCount"
                    style="height: 30px;width: 70px;display: inline-block; white-space: nowrap;"
                    @change="dataChange()" />/{{ record.judgeNum }}
            </template>
            <template v-if="column.dataIndex === 'judgeScore'" style="text-align:center">
                <a-input name="judgeScore" v-model:value="record.judgeScore" style="height: 30px;width: 80px;"
                    @change="dataChange()" />
            </template>

            <template v-if="column.dataIndex === 'operation'" style="text-align:center">
                <a-button type="danger" shape="circle" preIcon="ant-design:delete-outlined"
                    @click="onDelete(record.key)"></a-button>
            </template>
        </template>
    </a-table>
</template>
<script lang="ts" setup>
import { computed, reactive, onMounted, ref } from 'vue';
import { bankQuestionlist } from '../LabExam.api';
import { SelectProps } from 'ant-design-vue';


const formD = reactive<Record<string, any>>({
    examRepoList: [],
});

const options = ref<SelectProps['options']>([]);
const totalScore = ref(0);

onMounted(async () => {
    //页面加载完成掉接口查题库信息
    formD.examRepoList = await bankQuestionlist();
    options.value = [];
    for (let i = 0; i < formD.examRepoList.length; i++) {
        options.value.push({
            value: formD.examRepoList[i].bankId,
            label: formD.examRepoList[i].bankName,
        });
    }
});

const formData = reactive<Record<string, any>>({
    labExamRepoList: [],
});

const bankColumns = [
    {
        title: '题库名称',
        dataIndex: 'bankId',
        align: "center",
        width: '15%',
    },
    {
        title: '单选数量',
        dataIndex: 'radioCount',
        align: "center",
        width: '15%',
    },
    {
        title: '单选分数',
        dataIndex: 'radioScore',
        align: "center",
        width: '10%',
    },
    {
        title: '多选数量',
        dataIndex: 'multiCount',
        align: "center",
        width: '15%',
    },
    {
        title: '多选分数',
        dataIndex: 'multiScore',
        align: "center",
        width: '10%',
    },
    {
        title: '判断题数量',
        dataIndex: 'judgeCount',
        align: "center",
        width: '15%',
    },
    {
        title: '判断题分数',
        dataIndex: 'judgeScore',
        align: "center",
        width: '10%',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: "center",
        width: '10%',
    },
];

const count = computed(() => formData.labExamRepoList.length + 1);

const onDelete = (key: string) => {
    formData.labExamRepoList.splice((parseInt(key) - 1), 1);
};

const handleAdd = () => {
    const newData = {
        key: `${count.value}`,
        bankId: '',
        radioCount: '',
        radioNum: '',
        radioScore: '',
        multiCount: '',
        multiNum: '',
        multiScore: '',
        judgeCount: '',
        judgeNum: '',
        judgeScore: '',
    };
    formData.labExamRepoList.push(newData);
};

function bankChange(i, bankId) {
    formD.examRepoList.forEach((item) => {
        if (item.bankId == bankId) {
            formData.labExamRepoList[i - 1].radioNum = item.radioCount;
            formData.labExamRepoList[i - 1].multiNum = item.multiCount;
            formData.labExamRepoList[i - 1].judgeNum = item.judgeCount;
        }
    });
    dataChange();
}

const emits = defineEmits<{
    (event: "sendData", msg: String): void;
}>();

function dataChange() {
    totalScore.value = 0;
    formData.labExamRepoList.forEach((item) => {
        let rc = item.radioCount || 0;
        let rs = item.radioScore || 0;

        let mc = item.multiCount || 0;
        let ms = item.multiScore || 0;

        let jc = item.judgeCount || 0;
        let js = item.judgeScore || 0;
        totalScore.value = totalScore.value + parseInt(rc) * parseInt(rs) + parseInt(mc) * parseInt(ms) + parseInt(jc) * parseInt(js)
    });
    emits('sendData', (totalScore.value).toString())
}

const handleAddS = (QuList) => {
    formData.labExamRepoList = [];
    for (var i = 0; i < parseInt(QuList.length); i++) {
        const newData = {
            key: `${count.value}`,
            bankId: QuList[i].bankId,
            radioCount: QuList[i].radioCount,
            // radioNum: QuList[i].radioNum,
            radioScore: QuList[i].radioScore,
            multiCount: QuList[i].multiCount,
            // multiNum: QuList[i].multiNum,
            multiScore: QuList[i].multiScore,
            judgeCount: QuList[i].judgeCount,
            // judgeNum: QuList[i].judgeNum,
            judgeScore: QuList[i].judgeScore,
        };
        formData.labExamRepoList.push(newData);
    };
};

defineExpose({
    onDelete,
    formData,
    dataChange,
    handleAddS,
    totalScore,
});

</script>

<style lang="less" scoped>
.editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
        padding-right: 24px;
    }

    .editable-cell-text-wrapper {
        padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        margin-top: 4px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 20px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }
}

.editable-cell:hover .editable-cell-icon {
    display: inline-block;
}

:deep(.table-css) {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
</style>
